<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*div{*/
            /*!*border-radius:120px;*!*/
            /*border: 1px solid;*/
            /*width: 120px;*/
            /*height: 120px;*/
            /*box-shadow: 5px 5px 10px grey;*/
        /*}*/
        li{
            float: left;
            width: 100px;
            height: 50px;
            background-color: black;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            font-weight: lighter;
        }
        ul{
            list-style: none;
            background-color: black;
        }

        a{
            text-decoration: none;
            color: rgba(255,255,255,0.8);
        }

        /*#a1{*/
            /*position: relative;*/
        /*}*/

        sup{
            position: absolute;
            top:-2px;
            right: -15px;
            background-color: red;
            /*width: 24px;*/
            line-height: 16px;
            font-size: 8px;
        }
        /*#li1{*/
            /*position: relative;*/
            /*top:10px;*/
            /*left:10px;*/
        /*}*/
        #a1{
            position: relative;
        }
        #a1 > ul{
            position: absolute;
            /*top:20px;*/
            /*left:20px;*/
            display: none;
        }

        #a1:hover ul{
            position: absolute;
            /*top:20px;*/
            /*left:20px;*/
            display: block;
        }
    </style>
</head>
<body>

<ul>
    <li><a href="#">码云</a></li>
    <li id="li1"><a href="#">开源软件</a></li>
    <li><a href="#" id="a1">企业版
    <sup>
        特惠
    </sup>

        <ul>
            <li>test1</li>
            <li>test2</li>
        </ul>
    </a></li>
    <li><a href="#">高校版</a></li>
    <li><a href="#">我的码云</a></li>
</ul>

</body>
</html>